<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      div {
          display: flex;
          flex-direction: column;
      }

      input {
          width: 200px;
          margin-top: 5px;
      }
  </style>
</head>
<body>
<div>
  <input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input
    type="text"><input
    type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input
    type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input
    type="text"><input type="text">
  <script>
    // 闭包
    // 防抖节流方法通用性

    function debounce(fn, wait) {
      let timer = null;
      return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, args)
        }, wait)
      }
    }

    function throttle(fn, wait) {
      let timer = null;
      return function (...args) {
        if (timer) return;
        fn.apply(this, args)
        timer = setTimeout(() => {
          timer = null;
        }, wait)
      }
    }

    const logValue = (e) => {
      console.log(e.target.value);
    }

    const inputList = document.querySelectorAll('input');
    inputList.forEach(item => {
      item.oninput = debounce(logValue, 1000);
    })

    function sum(a, b) {
      console.log('执行了一次');
      return a + b;
    }

    function cache(fn) {
      let cacheData = {};
      return function (...args) {
        if (!cacheData[args]) cacheData[args] = fn(...args);
        return cacheData[args];
      }
    }

    const cacheSum = cache(sum);
    const sum1 = cacheSum(3, 4);
    const sum2 = cacheSum(3, 4)
    const sum3 = cacheSum(3, 4)
    const sum4 = cacheSum(3, 4)
    const sum5 = cacheSum(3, 6)
    console.log(sum1, sum2, sum5)
  </script>
</div>
</body>
</html>
